<template>
  <div class="l-container">
    <div class="container-center">
      <div class="center-title">
        <img src="../assets/images/login-title.png" />
      </div>
      <div class="title-text">工厂价 货源达</div>
      <div class="content-box">
        <div class="content-box-title">
          <div>免密登录/注册</div>
          <div class="line"></div>
        </div>
        <div class="content-pos">
          <div class="content-box-input">
            <input type="number" v-model="mobile"  placeholder="请输入手机号"/>
          </div>   
         <div class="text-alert" v-show="mobileshow">{{mobileNum}}</div>
        </div>
       <div class="content-pos">
        <div class="content-box-input">
          <input type="text" v-model="imgCode" placeholder="请输入图片验证码">
          <div class="content-box-code">
            <img :src="imgurl" alt="" @click="toggleImg">
          </div>
        </div>
        <div class="text-alert" v-show="!imgCode">{{imgAlert}}</div>
       </div>
       <div class="content-pos">
        <div class="content-box-input">
          <input type="text" @keyup.enter="login" placeholder="请输入短信验证码"  v-model="code">
          <div 
            class="content-box-code1"
            :class="{'btn-gray-active':controlClick}"  
            @click="sendCode()" 
          >
            {{msg}}
          </div>
        </div>
       </div>
       <!-- <div class="text-alert" v-if="flag">{{shortMes}}</div> -->
        <div class="content-box-btn"  @click="login">登录</div>
        <!-- <p class="p1">注册/登录即代表同意</p> -->
      </div>
    </div>
      <el-button :plain="true" @click="loginSmsCode()"></el-button>
  </div>
</template>
<script>
import Logo from '~/components/Logo.vue'
import md5 from '../assets/js/md5.js'
export default {
  components: {
    Logo
  },
  data() {
    return {
      imgurl: `${process.env.APIHOST}/image`, // 图片验证码路径
      imgCode: '', // 图片验证码,
      mobile: '', //用户手机号
      code: '', //手机短信验证码
      timer: null, // 登录定时器
      timers:null, //注册定时器
      time: 60, // 时间
      configPw:'',//确认密码
      password:'',//手机密码
      fx_login:'',//登录参数
      controlClick: false, // 控制点击
      email:'',//qq邮箱
      mobileNum:'',//后台返回手机号格式问题提示，设置给前端
      imgAlert:'',//后台返回图形验证码问题提示，设置给前端
      shortMes:'',//后台返回短信验证码问题提示，设置给前端
      mobileshow: false,//控制显示文字提示，
      test:'',//只让弹窗弹出一次
      // userInfo:this.$getUser(params) || null,
      userInfo: null,//用户信息
      flag:false,//控制是否登录
      msg:'获取验证码', //显示1:获取验证码 2:60s倒计时 3:重新获取验证码
    }
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  watch: {
    mobile() {
      this.mobileshow = false; //watch监听 输入完手机号和验证码直接隐藏掉提示
    }
  },
  mounted(){
    // this.imgurl = ''
    // setTimeout(() => {
    //   this.imgurl = `${process.env.APIHOST}/image`
    // },0)
  },
  methods: {
    clickIpt(mobile){
      return 
    },
    login() {//登录
      // this.go('myAddFans')
      if(this.$isNull(this.mobile)) {
        this.mobileNum="手机号不能为空"
        this.mobileshow = true
        return
      }
      if(!(/^1[3456789]\d{9}$/.test(this.mobile))) {
        this.mobileNum="手机号码有误，请重填"
        this.mobileshow = true
        return
      }
      if (this.$isNull(this.imgCode)){
        this.imgAlert="请输入图片验证码"
        return
      }
      // this.sendCode()
      // if (this.controlClick){ 不用控制倒计时结束才能登录，直接去登录
      //   return
      // }
      if(!this.code){//前端判定验证码不能为空
        if(this.test){
          this.test.close()
        }
        this.test=this.$message({
          message:'请输入手机验证码',
          type:'success',
        }) 
        return   
      }
      let params = {//传递用户信息
        smsCode:this.code,
        username:this.mobile
      }
      this.$axios.$post('loginSmsCode',params).then(res =>{
        if(res.status === 200){
          //存储用户信息和token
          //  this.$login(res.obj.id,res.obj.token,res.obj.username)
          this.userInfo = res.obj
          this.$store.commit('user/setUser', {
            userid: res.obj.id,
            token: res.obj.token,
            name: res.obj.username,
            auth: true,
          })
          if(this.test){
            this.test.close()
          }
          this.test = this.$message({
            message:res.msg,
            type:'success',
            duration:1000,
          })
            this.$router.push('/myAddFans') //登录成功跳转登录页面
            if (this.$store.state.index === 1) {//我要涨粉
              this.$router.replace('/myAddFans');
            } else if (this.$store.state.index === 2) {//多账号管理
              this.$router.replace('/multiPlat');
            } else if (this.$store.state.index === 3) {//我要卖货
              this.$router.push('/pickGoodsHall');
            } else {
              this.$router.replace('/myAddFans');
            }
          // if (this.$store.state.index === 1) {//我要涨粉
          //   this.$router.replace('/myAddFans');
          // } else if (this.$store.state.index === 2) {//多账号管理
          //   this.$router.replace('/multiPlat/accountPreviewt');
          // } else {
          //   this.$router.replace('/myAddFans');
          // }
        }else{
          if(this.test){
            this.test.close();
          }
          this.test = this.$message({
            message:res.msg,
            type:'warning',
            duration:1000,
          })
          this.go('/login')
        }
      }).catch(error => {
          this.$message.warning('登录失败')
      })
      
    },
    toggleImg() { // 切换图形验证码
      this.imgurl = ''
      setTimeout(() => {
       this.imgurl = `${process.env.APIHOST}/image`
      },0)
    },  
    sendCode() { // 发送手机验证码 
      this.mobileshow = false;
      if(this.$isNull(this.mobile)) {
        this.mobileNum="手机号不能为空"
        this.mobileshow = true
        return
      }
      if(!(/^1[3456789]\d{9}$/.test(this.mobile))) {
        this.mobileNum="手机号码有误，请重填"
        this.mobileshow = true
        return
      }
      if (this.$isNull(this.imgCode)){
        this.imgAlert="请输入图片验证码"
        return
      }
      if (this.controlClick) { //不让点击
        return
      }
      clearInterval(this.timer); //再一次进来时，再次清除定时器
      this.timer = setInterval(() => {
        this.msg = this.time +'s';
        if (this.time <= 0) {
          this.msg = '重新获取验证码';
          clearInterval(this.timer);
          this.time = 61;
          this.controlClick = false; //再次点击获取，重新获取验证码，需要销毁定时器
        }else{
          this.controlClick = true; //大于0我们就不让点击
        } 
        this.time--
      },1000)
      let params ={
        imageCode: this.imgCode,
        mobile: this.mobile,
        type: 'fx_login',
       }
      // this.controlClick = true; //再次点击变为true,不让点击
      this.$axios.$post('sendCode', params).then(res => {
        if (res.status === 200) {
          this.$message({
          message: '恭喜你，发送验证码成功',//前端设置
          // message: res.msg,//后台返回
          type: 'success',
          duration:1000,
        });
        } else {
          clearInterval(this.timer);//清除定时器
          if(this.test){
            this.test.close()
          }
          this.test = this.$message({
            type:'warning',
            message:res.msg,
            duration:1000,
          })
          this.imgurl = ''; //动态切换验证码
          setTimeout(() => {
            this.imgurl = `${process.env.APIHOST}/image`
          },0)
        }
      })
    },
  }
}
</script>

<style scoped>
  .l-container {
    background: url('../assets/images/login_bg.png') no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: fixed;
    overflow: hidden;
  }
  .container-center {
    width: 380px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .center-title {
    width: 189px;
    height: 36px;
    margin: 0 auto;
  }
  .center-title img {
    width: 100%;
    height: 100%;
  }
  .title-text {
    font-size: 24px;
    color: #fffefe;
    text-align: center;
    margin-top: 24px;
  }
  .content-box {
    background: #fff;
    border-radius: 3px;
    padding: 40px 28px;
    margin-top: 40px;
  }
  .content-box-title {
    color: #333;
    font-size: 22px;
    text-align: center;
    margin-bottom: 57px;
  }
  .content-box-title .line {
    width: 80px;
    height: 3px;
    background: #0096e6;
    margin: 9px auto 0 auto;
  }
  .content-pos{
    position:relative;
  }
  .content-box-input {
    height: 40px;
    border: 1px solid #ebebeb;
    border-radius: 3px;
    box-sizing: border-box;
    margin-top: 27px;
    display: flex;
    align-items: center;
  }
  .content-box-input input {
    height: 38px;
    line-height: 38px;
    flex:1;
    margin-left: 20px;
    font-size: 14px;
    color: #666
  }
  .content-box-code {
    width: 92px;
    background: #f4f4f4;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border: 1px solid #ebebeb;
    cursor: pointer;
    color: #999;
    font-size: 14px;
    user-select: none;
    box-sizing:border-box;
    transition:all .1s ease;
  }
  .content-box-code1 {
    width: 120px;
    background: #0096e6;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border: 1px solid #ebebeb;
    cursor: pointer;
    color: #ffffff;
    font-size: 14px;
    user-select: none;
    box-sizing:border-box;
    letter-spacing: 1px;
  }
  .btn-gray-active{
    background: #f4f4f4;
    color: #999;
  }
  .content-box-code img {
    width: 91px;
    height: 38px;
  }
  .content-box-btn {
    background: #0096e6;
    color: #fff;
    font-size: 16px;
    text-align: center;
    height: 40px;
    border-radius: 3px;
    line-height: 40px;
    margin-top: 28px;
    cursor: pointer;
  }
  .content-box .p1 {
    color: #999;
    font-size: 12px;
    text-align: center;
    margin-top: 54px;
  }
  .text-alert{
    color:#EF1300;
    font-size: 12px;
    position:absolute;
    top:48px;
  }
 .el-button {
    padding:0;
    margin:0;
    background-color:transparent;
    pointer-events: none;
    user-select:none;
  }
  /* .notice-error{
    transition: opacity .3s,transform .3s,right .3s,top .4s;
  }
  .notice-error {
    right: 223px !important;
    top:0px !important
} */
</style>
